﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
    <style>
      html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map;
        require([
          "esri/map", "esri/layers/ArcGISImageServiceLayer",
          "esri/layers/ImageServiceParameters", "esri/layers/RasterFunction", "esri/geometry/Extent",
          "dojo/parser", "dojo/domReady!"
        ], function (
          Map, ArcGISImageServiceLayer, ImageServiceParameters, RasterFunction, 
          Extent, parser
        ) {
            parser.parse();

            var initExtent = new Extent({ "xmin": -13224484.260283869, "ymin": 4295127.538002357, "xmax": -13105721.93623988, "ymax": 4362783.124240531, "spatialReference": { "wkid": 102100 } });
            map = new Map("map", {
                extent: initExtent
            });

            var colorRamp = [[0, 175, 240, 233], [3, 175, 240, 222], [7, 177, 242, 212],
                [11, 177, 242, 198], [15, 176, 245, 183], [19, 185, 247, 178], [23, 200, 247, 178],
                [27, 216, 250, 177], [31, 232, 252, 179], [35, 248, 252, 179], [39, 238, 245, 162],
                [43, 208, 232, 135], [47, 172, 217, 111], [51, 136, 204, 88], [55, 97, 189, 66],
                [59, 58, 176, 48], [63, 32, 161, 43], [67, 18, 148, 50], [71, 5, 133, 58], [75, 30, 130, 62],
                [79, 62, 138, 59], [83, 88, 145, 55], [87, 112, 153, 50], [91, 136, 158, 46], [95, 162, 166, 41],
                [99, 186, 171, 34], [103, 212, 178, 25], [107, 237, 181, 14], [111, 247, 174, 2],
                [115, 232, 144, 2], [119, 219, 118, 2], [123, 204, 93, 2], [127, 191, 71, 2], [131, 176, 51, 2],
                [135, 163, 34, 2], [139, 148, 21, 1], [143, 135, 8, 1], [147, 120, 5, 1], [151, 117, 14, 2], [155, 117, 22, 5],
                [159, 115, 26, 6], [163, 112, 31, 7], [167, 112, 36, 8], [171, 110, 37, 9], [175, 107, 41, 11],
                [179, 107, 45, 12], [183, 105, 48, 14], [187, 115, 61, 28], [191, 122, 72, 40], [155, 117, 22, 5],
                [159, 115, 26, 6], [163, 112, 31, 7], [167, 112, 36, 8], [171, 110, 37, 9],
                [175, 107, 41, 11], [179, 107, 45, 12], [183, 105, 48, 14], [187, 115, 61, 28], [191, 122, 72, 40],
                [155, 117, 22, 5], [159, 115, 26, 6], [163, 112, 31, 7], [167, 112, 36, 8], [171, 110, 37, 9],
                [175, 107, 41, 11], [179, 107, 45, 12], [183, 105, 48, 14], [187, 115, 61, 28], [191, 122, 72, 40],
                [195, 133, 86, 57], [199, 140, 99, 73], [203, 148, 111, 90], [207, 153, 125, 109],
                [213, 163, 148, 139], [217, 168, 163, 160], [223, 179, 179, 179], [227, 189, 189, 189],
                [231, 196, 196, 196], [235, 207, 204, 207], [239, 217, 215, 217], [243, 224, 222, 224],
                [247, 235, 232, 235], [251, 245, 242, 245], [255, 255, 252, 255]];

            var rasterFunction = new esri.layers.RasterFunction();
            rasterFunction.functionName = "Hillshade";
            rasterFunction.variableName = "DEM";
            //rasterFunction.functionName = "ShadedRelief";
            //rasterFunction.variableName = "Raster";
            var arguments = {};
            arguments.Azimuth = 215.0;
            arguments.Altitude = 60.0;
            arguments.ZFactor = 30.3;
            //arguments.Colormap = colorRamp;
            rasterFunction.arguments = arguments;

            var params = new ImageServiceParameters();
            params.renderingRule = rasterFunction;

            var imageServiceLayer = new ArcGISImageServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/CaliforniaDEM/ImageServer", {
                imageServiceParameters: params
            });
            map.addLayer(imageServiceLayer);
        });
    </script>
</head>
<body>
    <div id="map"> </div>
</body>
</html>
